import { useEffect, useState } from "react";
import type { FC } from "react";

import styles from "./styles.module.scss";
import { closeFnSet } from "./index";

interface ConfirmProps {
  content: string;
  showCancelButton?: boolean;
  onClose: () => void;
  onOk: () => void;
}

const Show: FC<ConfirmProps> = (props) => {
  const [active, setActive] = useState(false);
  useEffect(() => {
    setActive(true);
  }, []);
  return (
    <div
      className={
        active
          ? `${styles["confirm-mask"]} ${styles.active}`
          : `${styles["confirm-mask"]}`
      }
    >
      <div className={styles["confirm-content"]}>
        <div className={styles["confirm-body"]}>{props.content}</div>
        <div className={styles["confirm-btns"]}>
          {props.showCancelButton !== false ? (
            <div
              className={`${styles["confirm-btn"]} ${styles["confirm-cancel"]} `}
              onClick={() => {
                closeFnSet.forEach((item) => {
                  item();
                });
                closeFnSet.clear();
                props.onClose && props.onClose();
              }}
            >
              取消
            </div>
          ) : null}

          <div
            className={styles["confirm-btn"]}
            onClick={() => {
              props.onOk?.();
              closeFnSet.forEach((item) => {
                item();
              });
              closeFnSet.clear();
              props.onClose?.();
            }}
          >
            确定
          </div>
        </div>
      </div>
    </div>
  );
};

export default Show;
